<template>
  <div>
    <!--    头订单明细-->
    <div id="FeedbackDetailHead">
      <van-icon name="arrow-left" size="30" @click="toInformationList"/>
      <span>反馈详情</span>
    </div>

    <!--    订单详情-->
    <div class="FeedbackDetail1">
      <span style="font-size: 13px">订单编号：{{ this.Order.orderInformation.orderId }}</span>
      &emsp;
      <van-icon name="link-o" @click="copyValue($event)"/>
      <br>
      <span style="font-size: 13px">到达时间：{{ this.Order.orderTime.destinationTime }}</span><br>
      <span style="font-size: 13px">出发点：{{ this.Order.orderInformation.startingPointAddress }}</span><br>
      <span style="font-size: 13px">目的地：{{ this.Order.orderInformation.destinationAddress }}</span>
    </div>
    <!--    司机详情及价格-->
    <div class="FeedbackDetail2">
      <div class="FeedbackDetail22">
        <van-image
            round
            width="5rem"
            height="5rem"
            :src="this.Driver.driverAttribute.driverImgurl"/>
      </div>
      <div class="FeedbackDetail222">
        <big><b>{{ this.Driver.carAttribute.carNumber }}</b></big><br>
        <span
            style="color: #9395A7">{{
            this.Driver.baseCarTypeManage.vehicleModel
          }} | {{ this.Driver.baseCarTypeManage.carManufactor }}</span><br><br>
        <span style="color: #9395A7">{{ this.Driver.driverAttribute.driverName }}</span>&emsp;
        <van-rate readonly v-model="this.Driver.driverAttribute.driverPoint" :size="15" color="red" void-icon="star"
                  void-color="#eee"/>&ensp;
        <span style="color: red;font-size: 15px">{{ this.Driver.driverAttribute.driverPoint }}.0分</span>
      </div>
      <div class="FeedbackDetail2222">
        <span style="color: red;margin-left: 15%;font-size: 50px">￥{{ this.Order.orderCost.passengerTotal }}</span>
        <span style="color: deepskyblue;margin-left: 10px;font-size: 10px">明细></span>
      </div>
    </div>
    <!--   投诉内容 -->
    <div class="FeedbackDetail3">
      <center>
        <span v-if="this.complaint.complaint==1" style="font-size: 20px;font-weight: bolder;">物品遗失</span>
        <span v-if="this.complaint.complaint==2" style="font-size: 20px;font-weight: bolder;">司机绕路</span>
        <span v-if="this.complaint.complaint==3" style="font-size: 20px;font-weight: bolder;">费用错误</span>
        <span v-if="this.complaint.complaint==4" style="font-size: 20px;font-weight: bolder;">下车未结束计算</span>
        <span v-if="this.complaint.complaint==5" style="font-size: 20px;font-weight: bolder;">未坐车却收费</span>
        <span v-if="this.complaint.complaint==6" style="font-size: 20px;font-weight: bolder;">司机态度差</span>
        <span v-if="this.complaint.complaint==7" style="font-size: 20px;font-weight: bolder;">车辆太脏</span>
        <span v-if="this.complaint.complaint==8" style="font-size: 20px;font-weight: bolder;">其他</span>
      </center>
      <span style="font-size: 15px">
       {{ this.complaint.complaintDetails }}
    </span>
    </div>

    <!--    处理内容-->
    <div class="FeedbackDetail4">
      <van-steps direction="vertical" :active="this.complaintStatus" active-color="#FF580E" active-icon="checked">
        <van-step>
          <div class="FeedbackDetail44">
            <span v-if="this.complaint.complaintStatus==1" style="font-size: 23px;">处理中</span><br>
            <span v-if="this.complaint.complaintStatus==2" style="font-size: 23px;">已处理</span><br>
            <span style="font-size: 20px;margin-left: 10px;color: black">您反馈的问题我们已记录。如反馈情况属实，司机将
            按照平台规定承担违规责任。</span><br><br>
            <span style="font-size: 20px;margin-left: 10px;color: black">{{ this.complaint.userResult }}</span><br>
            <span style="color: #D0D4D3">{{ this.complaint.resultTime }}</span>
          </div>
        </van-step>
        <van-step>
          <div class="FeedbackDetail444">
            <span style="font-size: 23px;">提交成功</span><br>
            <span
                style="font-size: 20px;margin-left: 10px;color: black">{{ this.complaint.complaintDetails }}</span><br>
            <span style="color: #D0D4D3">{{ this.complaint.complaintTime }}</span>
          </div>
        </van-step>
      </van-steps>
    </div>

    <!--    底部按钮-->
    <div class="FeedbackDetail5">
      <van-button type="default" style="width: 180px;border-radius: 50px" color="#4EA9CB" @click="guan">关闭
      </van-button>
      <van-button type="default" style="width:130px;color:#4EA9CB;border-radius: 50px;margin-left: 20px"
                  @click="callPhone">
        <van-icon name="phone" size="20px"/>
        有疑问
      </van-button>
    </div>

  </div>
</template>
<script>
import {findDriveById, findOrderById} from "@/api/order/orderList";
import {getComplaint} from "@/api/information/informationList";
import handleCopy from '@/utils/clipboard'

export default {
  data() {
    return {
      complaintStatus: 1,
      value: 5,
      //订单ID
      orderId: this.$route.query.orderId,
      //司机ID
      driverId: this.$route.query.driverId,
      //订单信息
      Order: {
        orderCost: {},
        orderInformation: {},
        orderTime: {},
      },
      //司机信息
      Driver: {
        carAttribute: {},
        driverAttribute: {},
        baseCarTypeManage: {}
      },
      //投诉信息
      complaint: {}
    }
  },
  created() {
    //查找某个订单信息
    findOrderById(this.orderId).then(res => {
      this.Order = res.data
    })
    //查找司机信息
    findDriveById(this.driverId).then(res => {
      this.Driver = res.data
    })
    //查找投诉内容
    getComplaint(this.orderId).then(res => {
      this.complaint = res.data
      if (this.complaint.complaintStatus == 2) {
        this.complaintStatus = 0
      } else {
        this.complaintStatus = 1
      }
    })
  },
  methods: {
    toInformationList() {
      this.$router.push('/informationList')
    }
    ,
    //点击复制
    copyValue(e) {
      let value = this.Order.orderInformation.orderId  //这里设置你要复制的文本信息，可以是text，也可以从e中获取，也可以自定义
      handleCopy(value, e, () => {
        console.log("这是复制成功回调函数")
        this.$toast('复制成功')
      }, () => {
        this.$toast('复制失败')
        console.log("这是复制失败回调函数")
      })
    }
    ,
    guan() {
      this.$router.push('/informationList')
    }
    ,
    //有疑问打电话
    callPhone() {
      window.location.href = 'tel:' + this.Driver.driverAttribute.driverPhone
    }
  }
}
</script>

<style>
#FeedbackDetailHead {
  width: 100%;
  height: 50px;
  background: white;
}

#FeedbackDetailHead .van-icon {
  margin-top: 10px;
  margin-left: 20px;
}

#FeedbackDetailHead span {
  font-size: 20px;
  margin-left: 30%;
  margin-top: 5px;
}

.FeedbackDetail1 {
  margin-left: 5%;
  width: 95%;
  height: 90px;
  line-height: 20px;
}

.FeedbackDetail2 {
  width: 95%;
  margin-left: 5%;
  height: 180px;
}

.FeedbackDetail22 {
  vertical-align: top; /* 从顶部对齐 */
  display: inline-block;
}

.FeedbackDetail222 {
  width: 60%;
  display: inline-block;
  margin-top: 10px;
  margin-left: 10px;
}

.FeedbackDetail2222 {
  margin-top: 20px;
  width: 100%;
  height: 60px;
}

.FeedbackDetail3 {
  width: 90%;
  height: 100px;
  margin-left: 5%;
  border-top: 1px solid #F2F9FA;
  border-bottom: 1px solid #F2F9FA;
  text-align: left;
  word-wrap: break-word; /* 自动换行 */
}

.FeedbackDetail4 {
  width: 90%;
  height: 400px;
  margin-left: 5%;
}

.FeedbackDetail4 .van-steps {
  background: #F3FCFF;
}

.FeedbackDetail44 {
  margin-left: 10px;
  width: 100%;
  height: 200px;
  text-align: left;
  word-wrap: break-word; /* 自动换行 */
  line-height: 22px;
}

.FeedbackDetail444 {
  width: 100%;
  height: 110px;
  line-height: 25px;
  text-align: left;
  word-wrap: break-word; /* 自动换行 */
}

.FeedbackDetail5 {
  margin-left: 20px;
  width: 90%;
  height: 45px;
}
</style>